<script lang="ts">
  import { onMount } from "svelte";

  const {
    onReady,
    onStart
  }: {
    onReady?: () => void;
    onStart?: () => void;
  } = $props();
  let btn: HTMLButtonElement | null = $state(null);
  let fill = $state<HTMLDivElement | null>(null);

  let progress = 0;
  let growTimer: number | null = null;
  let dropTimer: number | null = null;

  const GROW_SPEED = 1.8; // 按住每帧增长 %
  const DROP_SPEED = 2.5; // 松开每帧下降 %
  const INTERVAL = 15; // 25 fps
  function updateFill() {
    if (fill) fill.style.height = progress + "%";
  }

  function startGrow() {
    if (dropTimer !== null) clearInterval(dropTimer);
    growTimer = setInterval(() => {
      progress += GROW_SPEED;
      if (progress >= 100) {
        progress = 100;
        updateFill();
        onFull();
      } else updateFill();
    }, INTERVAL);
  }

  function startDrop() {
    if (growTimer !== null) clearInterval(growTimer);
    dropTimer = setInterval(() => {
      progress -= DROP_SPEED;
      if (progress <= 0) progress = 0;
      updateFill();
    }, INTERVAL);
  }

  function onFull() {
    console.log("🎉 进度条满，触发切换场景");
		if (onReady) onReady();
  }
  let first = true;
  onMount(() => {
    if (!btn || !fill) return;
    const pressStart = "ontouchstart" in window ? "touchstart" : "mousedown";
    const pressEnd = "ontouchend" in window ? "touchend" : "mouseup";

    btn.addEventListener(pressStart, (e: TouchEvent | MouseEvent) => {
      e.preventDefault();
      startGrow();
      if (first) {
        first = false;
        if (onStart) onStart();
      }
    });

    document.addEventListener(pressEnd, () => {
      startDrop();
    });
  });
</script>

<div class="w-full h-full flex justify-center items-center gap-10">
  <div class="slider-wrap">
    <div class="slider-fill" id="fill" bind:this={fill}></div>
  </div>
  <button class="xmas-btn" bind:this={btn} aria-label="立即领取圣诞礼物">
    <!-- 简单 SVG 圣诞树图标（可替换为任意 icon） -->
    <svg
      class="icon"
      viewBox="0 0 24 24"
      fill="none"
      aria-hidden="true"
      focusable="false"
    >
      <path
        d="M12 2 L8 10 H11 L7 18 H17 L13 10 H16 L12 2 Z"
        fill="#fff"
        opacity="0.95"
      />
      <rect x="10" y="18" width="4" height="3" rx="0.5" fill="#8b5e3c" />
    </svg>

    <span class="label">🎄Long Press🎄</span>

    <!-- 雪花容器 -->
    <span class="xmas-snow" aria-hidden="true">
      <i class="snow-dot"></i>
      <i class="snow-dot"></i>
      <i class="snow-dot"></i>
      <i class="snow-dot"></i>
      <i class="snow-dot"></i>
    </span>
  </button>
</div>

<style>
  :root {
    --btn-bg-1: #0f5b2f; /* 深绿 */
    --btn-bg-2: #117a44; /* 亮绿 */
    --accent: #d7263d; /* 浆果红 */
    --gold: #ffd57e; /* 装饰金 */
    --text: #fff;
    --shadow: 0 8px 20px rgba(6, 35, 18, 0.45);
    --radius: 14px;
    --btn-padding: 14px 22px;
    --font-size: 16px;
  }

  .slider-wrap {
    position: relative;
    width: 45px;
    height: 400px;
    border-radius: 20px;
    background: linear-gradient(180deg, #1b4e22, #0f3617);
    border: 3px solid #fff4;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
    overflow: hidden;
  }

  /* 进度条 */
  .slider-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(180deg, #ff2e2e, #b80000);
    box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.25);
    transition: height 0.08s linear;
  }

  /* 圣诞边框闪光 */
  .slider-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    border: 3px solid rgba(255, 255, 255, 0.22);
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
    pointer-events: none;
  }

  .xmas-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: var(--btn-padding);
    font-size: var(--font-size);
    color: var(--text);
    background: linear-gradient(180deg, var(--btn-bg-1), var(--btn-bg-2));
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid rgba(255, 255, 255, 0.06);
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transform: translateZ(0);
    transition:
      transform 0.12s ease,
      box-shadow 0.12s ease;
    overflow: visible;
  }

  /* 小图标（圣诞树/礼物） */
  .xmas-btn .icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    flex: 0 0 20px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
  }

  /* 按下/触摸反馈 */
  .xmas-btn:active,
  .xmas-btn--pressed {
    transform: translateY(2px) scale(0.995);
    box-shadow: 0 4px 12px rgba(6, 35, 18, 0.45);
  }

  /* 焦点可见性（键盘可达） */
  .xmas-btn:focus {
    outline: none;
    box-shadow:
      0 0 0 4px rgba(17, 122, 68, 0.18),
      var(--shadow);
  }

  /* 装饰：左侧花环（用伪元素） */
  .xmas-btn::before {
    content: "";
    position: absolute;
    left: -10px;
    top: -10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: radial-gradient(
        circle at 35% 30%,
        rgba(255, 255, 255, 0.06),
        transparent 20%
      ),
      linear-gradient(135deg, rgba(255, 255, 255, 0.02), transparent 40%);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
    transform: rotate(-10deg);
    pointer-events: none;
  }

  /* 装饰：右上浆果小点 */
  .xmas-btn::after {
    content: "";
    position: absolute;
    right: 8px;
    top: -8px;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle at 35% 30%, #fff6, #d7263d);
    border-radius: 50%;
    box-shadow:
      12px 6px 0 0 #d7263d,
      22px 0 0 0 #ffd57e;
    pointer-events: none;
    transform-origin: center;
  }

  /* 轻微雪花颗粒（使用子元素） */
  .xmas-snow {
    position: absolute;
    left: 0;
    right: 0;
    top: -28px;
    height: 28px;
    overflow: visible;
    pointer-events: none;
  }
  .snow-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    opacity: 0.9;
    transform: translateY(0) scale(0.9);
    animation: drift 2.2s linear infinite;
  }
  .snow-dot:nth-child(2) {
    left: 18%;
    animation-delay: 0.25s;
    animation-duration: 2.6s;
    opacity: 0.7;
    transform: scale(0.7);
  }
  .snow-dot:nth-child(3) {
    left: 42%;
    animation-delay: 0.5s;
    animation-duration: 2s;
    opacity: 0.6;
    transform: scale(0.85);
  }
  .snow-dot:nth-child(4) {
    left: 68%;
    animation-delay: 0.8s;
    animation-duration: 2.8s;
    opacity: 0.75;
    transform: scale(0.6);
  }
  .snow-dot:nth-child(5) {
    left: 86%;
    animation-delay: 1s;
    animation-duration: 2.3s;
    opacity: 0.5;
    transform: scale(0.9);
  }

  @keyframes drift {
    0% {
      transform: translateY(-6px) translateX(0) scale(0.9);
      opacity: 0.95;
    }
    30% {
      opacity: 1;
    }
    100% {
      transform: translateY(12px) translateX(6px) scale(0.6);
      opacity: 0;
    }
  }

  /* 文字阴影 / 金色高光小标 */
  .xmas-btn .label {
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
    letter-spacing: 0.4px;
    font-weight: 600;
  }
  .xmas-btn .badge {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 999px;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08),
      rgba(0, 0, 0, 0.06)
    );
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) inset;
  }

  /* 可配置的小圆灯（在大屏或需要更花哨时打开） */
  .xmas-btn.lights::before {
    box-shadow:
      0 -22px 0 0 #ffefc4,
      18px -20px 0 0 #ffd1d8,
      36px -18px 0 0 #c5ffd6;
    opacity: 0.95;
  }

  /* 减少运动首选项 */
  @media (prefers-reduced-motion: reduce) {
    .snow-dot {
      animation: none;
      opacity: 0.7;
      transform: translateY(4px) scale(0.8);
    }
    .xmas-btn {
      transition: none;
    }
  }

  /* 小屏适配（字体和内边距） */
  @media (max-width: 420px) {
    :root {
      --font-size: 15px;
      --btn-padding: 12px 18px;
      --radius: 12px;
    }
    .xmas-btn::after {
      right: 6px;
      top: -6px;
    }
  }
</style>
